<template>
  <div class="glass gap-col-8">
    <div class="swap gap-row-5" :class="{ 'is-left': isVisitor, 'is-right': isSubscriber }">
      <div class="label" :class="{ active: isVisitor }" @click="$emit('update:modelValue', IDENTITY.VISITOR)">
        {{ $t('common.visitor') }}
      </div>
      <div class="label" :class="{ active: isSubscriber }" @click="$emit('update:modelValue', IDENTITY.SUBSCRIBER)">
        {{ $t('common.subscriber') }}
      </div>
    </div>
  </div>
</template>
<script setup>
import { computed } from 'vue'
import { IDENTITY } from '@/constant'

const props = defineProps({
  modelValue: {
    type: Number,
    required: true,
  },
})

defineEmits(['update:modelValue'])

const isVisitor = computed(() => props.modelValue === IDENTITY.VISITOR)
const isSubscriber = computed(() => props.modelValue === IDENTITY.SUBSCRIBER)
</script>
<style scoped lang="scss">
.glass {
  display: flex;
  width: 100%;
  height: 2.25rem;
  padding: 1rem 1rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  background: rgba(24, 25, 37, 0.02);
  backdrop-filter: blur(4.5px);

  position: absolute;
  top: 0;
  // z-index: 1000;

  .swap {
    display: inline-flex;
    padding-left: 1rem;
    align-items: center;

    border-radius: 62.5rem;
    border: 1px solid var(--color-primary-white, #fff);
    background: var(--color-btn-icon, rgba(24, 25, 37, 0.4));
  }

  .is-left {
    padding-left: 0rem;
    padding-right: 1rem;
  }

  .is-right {
    padding-left: 1rem;
    padding-right: 0rem;
  }

  .label {
    color: var(--color-primary-white, #fff);
    text-align: center;

    /* Medium/12 */
    font-family: 'PingFang SC';
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 500;
    line-height: 120%; /* 0.9rem */
  }

  .active {
    display: flex;
    height: 1.125rem;
    padding: 0.3125rem 1rem;

    justify-content: center;
    align-items: center;

    border-radius: 62.5rem;
    color: var(--color-primary-gray, #3b3c46);
    border: 2px solid var(--color-primary-white, #fff);
    background: var(--color-primary-white, #fff);
  }

  .deactive {
    color: var(--color-primary-white, #fff);
  }
}
</style>
